@import './mixins.styl'
.add-todo 
  clearDefault()
  width: 96%;
  padding: 13px;
  color: #494b4b;
  box-shadow: 2px 2px 6px grey;
  display: flex;
  margin: 13px auto;
  box-sizing: border-box;
  border-radius: 16px;
  background-color: rgba(255, 255, 255, 0.6);
  transition: all 300ms ease-in-out;
  input[type='checkbox'] {
    clearDefault()
    cursor: pointer;
    position: relative  
    width 40px
    height 40px
    &::after {
      content: url('@/assets/images/pen.svg');
      }
  } 
  &:hover 
    box-shadow: 2px 2px 9px #69bb71;
    scale: 1.007;
    transition: all 300ms ease-in-out;
    input[type='checkbox']
      &::after {
        content: url('@/assets/images/unchecked.svg');
      }
      &:checked::after {
        content: url('@/assets/images/checked.svg');
      }
  .add
    clearDefault()  
    font-size: 28px;
    line-height: 36px
    background: none
    margin-left: 8px
    font-family: Century, '楷体';
    color: #494b4b; 
.relax
  margin:15px auto
  text-align: center
  font-size:28px
  color: rgb(18, 184, 134);
  font-family: Century 
/* .all
  clearDefault()
  display: inline-block
  float:left
  width: 40px;
  height: 40px;
  scale: 0.85;
  cursor: pointer;
  position: relative
  top: -2px
  &::after {
    content: url('@/assets/images/unchecked.svg');
  }
  &:checked::after {
    content: url('@/assets/images/checked.svg');
  } */